<template>
  <TableLayout no-padding>
    <template v-slot:search>
      <div class="search-item">
        <el-input v-model="searchForm.userName" placeholder="请输入用户名称" prefix-icon="el-icon-search" />
      </div>
      <div class="search-item">
        <el-input v-model="searchForm.phonenumber" placeholder="请输入手机号码" prefix-icon="el-icon-search" />
      </div>
      <div class="search-item">
        <pure-button type="minor" label="查询" icon="search" @click="onSearch" />
        <pure-button type="patch" label="重置" icon="reset" @click="onReset" />
      </div>
    </template>
    <template v-slot:footer>
      <el-pagination
        :page-sizes="[20, 50, 100, 200]"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </template>
    <el-table ref="tableRef" :data="tableData" height="100%" row-key="userId">
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column label="用户名称" prop="userName" />
      <el-table-column label="用户昵称" prop="nickName" />
      <el-table-column label="科室" prop="dept" :formatter="formatDept" />
      <el-table-column label="组长" prop="isLeader" :formatter="formatIsLeader" />
    </el-table>
  </TableLayout>
</template>

<script>
import pageMixin from '@/mixins/page';
import { getList, } from '@/features/system/user/api';
import { uniqWith, } from 'lodash-es';

export default {
  mixins: [
    pageMixin,
  ],
  props: {
    title: {
      type: String,
      default: '',
    },
    selectedUser: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      searchForm: {},
      tableData: [],
    };
  },
  watch: {
    tableData() {
      this.toggleSelection(this.selectedUser);
    },
  },
  created() {
    this.getListData();
  },
  methods: {
    toggleSelection(selection) {
      if (!selection.length || !this.tableData.length) {
        this.$nextTick(() => {
          this.$refs.tableRef.clearSelection();
        });
        return;
      }
      this.tableData.map(item => {
        const index = selection.findIndex(e => {
          return e.userId === item.userId;
        });
        if (index > -1) {
          this.$nextTick(() => {
            this.$refs.tableRef.toggleRowSelection(item, true);
          });
        }
      });
    },
    formatDept(row, col, val) {
      return val?.deptName ?? '-';
    },
    formatIsLeader(row, col, val) {
      return val === 1 ? '是' : '否';
    },
    getListData() {
      const loading = this.showLoading();
      const { date, ...rest } = this.searchForm;
      const params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        ...rest,
      };
      if (date) {
        const [
          startTime,
          endTime,
        ] = date;
        params.startTime = startTime;
        params.endTime = endTime;
      }
      getList(params).then((data) => {
        if (data.data) {
          const { rows, total, } = data.data;
          this.total = total;
          this.tableData = rows;
        }
      }).finally(() => {
        loading.close();
      });
    },
    onReset() {
      this.searchForm = {};
      this.onSearch();
    },
    getSelectedUser() {
      const selection = this.$refs.tableRef.selection;
      const selectedUser = [
        ...this.selectedUser,
        ...selection,
      ];
      return uniqWith(selectedUser, function (arrVal, otherVal) {
        return parseInt(arrVal.userId) === parseInt(otherVal.userId);
      });
    },
  },
};
</script>
